import React from 'react';
import {connect} from 'dva';
import { Button, Select, Table, Pagination, DatePicker } from 'antd';
import { VtxModal, VtxMap, VtxGrid } from 'vtx-ui';
import styles from './OverView.less';
import { NAME_SPACE, SearchParams, peo, car } from './config';
import moment from 'moment'

const Option = Select.Option
const {RangePicker} = DatePicker

const Index = ({dispatch, collectionAmountStatistics}) => {

  const {
    loading,
    pageNo,
    pageSize,
    total,
    searchParams,
    oldSearchParams,
    // 查询对象
    searchOverObj,
    detailsModelVisable,
    // 人员名单
    userList,
    // 车辆列表
    carList,
     // 人员名称
     userName,
     // 车牌号
     carNum,
     dataList,
     details,
  } = collectionAmountStatistics;

  // 日期处理
  const getMomentDate = (dateString) => {
    if (!dateString) return "";
    return moment(dateString);
  }

  const gridProps = {
    titles: searchOverObj == 1 ? ['查询对象', '作业人员', '查询日期'] : ['查询对象', '车牌号', '查询日期'],
    gridweight: [1,1,2],
    // 点击确定
    confirm: () => {
      dispatch({
        type: `${NAME_SPACE}/getList`,
        payload: {type: 'search'}
      })
    },
    // 重置
    clear: () => {
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload: {
          searchParams: {...SearchParams},
          pageNo: 1,
          pageSize: 20
        }
      })
      dispatch({
        type: `${NAME_SPACE}/getList`,
        payload: {type: 'search'}
      })
    },
  }

  // 日期
  const datePorps = {
    style: {width: '100%'},
    format: "YYYY-MM-DD",
    onChange: (dateMoment, dateStr) => {
        dispatch({
            type: `${NAME_SPACE}/updateSubState`,
            payload: {
                sub: 'searchParams',
                data: {
                  startTime: moment(dateStr[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
                  endTime: moment(dateStr[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
                }
            }
        });
    },
    value: [getMomentDate(searchParams.startTime), getMomentDate(searchParams.endTime)],
  }

  // 改变搜索类型
  const changeType = (value) => {
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        searchOverObj: value
      }
    })
    dispatch({
      type: `${NAME_SPACE}/updateSubState`,
      payload: {
        sub: 'searchParams',
        data: {
          queryObject: value,
          carId: '',
          userId: '',
        }
      }
    })
  }

  // 显示详情
  const showDetail = (id, userName, carNum, time) => {
    
    dispatch({
      type: `${NAME_SPACE}/updateSubState`,
      payload: {
        sub: 'detailsSearchParams',
        data: {
          day: time,
          userCarId: id,
        }
      }
    })
    dispatch({
      type: `${NAME_SPACE}/getDetailsList`,
      payload: {
        type: 'search'
      }
    })
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        detailsModelVisable: true,
        userName: userName,
        carNum: carNum,
      }
    })
  }

  const tableProps = {
    autoFit: true,
    hideColumn: true,
    scroll:{
      y:`${document.documentElement.clientHeight - 100 - 120}px`,
    },
    indexColumn: true,
    showHeader: true,
    startIndex: (pageNo) * pageSize + 1,
    dataSource: dataList,
    loading: loading,
    pagination: false,
    columns: [
      {
        title: '序号', 
        key: '0',
        dataIndex: '0',
        ellipsis: true,
        render: (text, record, index) => {`${index+1}`}
      },{
        title: '车牌号', 
        key: 'carNum',
        dataIndex: 'carNum',
        ellipsis: true,
      },{
        title: '作业人员', 
        key: 'username',
        dataIndex: 'username',
        ellipsis: true,
      },{
        title: '医疗机构数量(个)', 
        key: 'hospitalNum',
        dataIndex: 'hospitalNum',
        ellipsis: true,
        sorter: (a, b) => {}
      },{
        title: '医废收集桶数(个)', 
        key: 'collectorBucketNum',
        dataIndex: 'collectorBucketNum',
        ellipsis: true,
        sorter: (a, b) => {}
      },{
        title: '医废收集重量(KG)', 
        key: 'collectorWeight',
        dataIndex: 'collectorWeight',
        ellipsis: true,
        sorter: (a, b) => {}
      },{
        title: '日期', 
        key: 'createTime',
        dataIndex: 'createTime',
        ellipsis: true,
      },{
        title: '操作', 
        key: '7',
        dataIndex: '7',
        ellipsis: true,
        render: (text, record, index) => {
          return(
            <div className={styles.toDo}>
              <a onClick={() => {showDetail(record.userCarId, record.username, record.carNum, record.createTime )}}>详情</a>
            </div>
          )
        }
      },
    ],
    rowKey: (record, index) => {
      return record.id
    },
  }

  const pagProps = {
    current: pageNo ,
    defaultCurrent: 1,
    total: total,
    pageSize: pageSize,
    showQuickJumper: true,
    showSizeChanger: true,
    onChange: (page) => {
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload: {
          pageNo: page 
        }
      });
      dispatch({
        type: `${NAME_SPACE}/getList`,
        payload: {
          type: 'page'
        }
      })
    },
    showTotal: (total) => {
        return `合计${total}条数据`
    },
    onShowSizeChange: (current, pageSize) => {
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload: {
          pageNo: 1,
          pageSize: pageSize,
        }
      })
      dispatch({
        type: `${NAME_SPACE}/getList`,
        payload: {
          type: 'page'
        }
      })
    },
  }


  const changeValue = (name, value) => {
    dispatch({
      type: `${NAME_SPACE}/updateSubState`,
      payload: {
        sub: 'searchParams',
        data: {
          [name]: value
        }
      }
    })
  }

  return (
    <div className={styles.normal}>
      <div className={styles.searchWarp}>
        <VtxGrid {...gridProps}>
          <Select
            style={{width: '100%'}}
            value={searchParams.queryObject}
            onChange={(value) => {changeType(value)}}
          >
            <Option value={1}>作业人员</Option>
            <Option value={2}>车牌号</Option>
          </Select>
          {
            searchOverObj==1?
              <Select
                value={searchParams.userId}
                onChange={(value) => {changeValue('userId', value)}}
                showSearch
                optionFilterProp={'children'}
                style={{width: '100%'}}
                
              >
                {
                  Array.isArray(userList)?
                    userList.map((item,index) => {
                      return(
                        <Option value={item.userId} key={index}>{item.userName}</Option>
                      )
                    })
                  :''
                }
              </Select>
            :
              <Select
              value={searchParams.carId}
              onChange={(value) => {changeValue('carId', value)}}
              showSearch
              optionFilterProp={'children'}
              style={{width: '100%'}}
              >
                {
                  Array.isArray(carList)?
                    carList.map((item,index) => {
                      return(
                        <Option value={item.id} key={index}>{item.carNum}</Option>
                      )
                    })
                  :''
                }
              </Select>
          }
          <RangePicker {...datePorps}/>
        </VtxGrid>
      </div>
      <div className={styles.table} style={{ height: document.documentElement.clientHeight-100 }}>
        <div className={styles.tableContent}>
          <Table {...tableProps}/> 
        </div>  
        <div className={styles.pagination}>
          <span className={styles.pagContent}> <Pagination {...pagProps}/> </span>  
        </div>  
      </div> 
    </div>
  )
}

export default connect(state => state)(Index)